<template>
  <div class='scroll-box card-box'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               title="设备列表"
               :close-on-click-modal="false"
               :append-to-body="true"
               :before-close="closeDialog"
               class="add-or-updata"
               width="65%"
               :close-on-press-escape="false">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item prop="deviceType"
                      label="">
          <el-select v-model="dataForm.deviceType"
                     clearable
                     class="width-100"
                     placeholder="请选择设备类型">
            <el-option v-for="item in $store.state.EquTypeList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop='deviceName'
                      :rules="stringRule(false, 1, 20)">
          <el-input v-model='dataForm.deviceName'
                    class='form-item'
                    clearable
                    placeholder='请输入设备名称'></el-input>
        </el-form-item>
        <el-form-item prop="brand"
                      :rules="stringRule(false, 1, 20)">
          <el-input v-model='dataForm.brand'
                    class='form-item'
                    clearable
                    placeholder='请输入品牌'></el-input>
        </el-form-item>
        <el-form-item prop='areaName'
                      :rules="stringRule(false, 1, 20)">
          <el-input v-model.trim='dataForm.areaName'
                    class='form-item'
                    clearable
                    placeholder='所在位置'></el-input>
        </el-form-item>
        <el-form-item prop='ip'
                      :rules="stringRule(false, 1, 20)">
          <el-input v-model.trim='dataForm.ip'
                    class='form-item'
                    clearable
                    placeholder='IP'></el-input>
        </el-form-item>
        <el-form-item prop='gatherPort'
                      :rules="stringRule(false, 1, 20)">
          <el-input v-model.trim='dataForm.gatherPort'
                    class='form-item'
                    clearable
                    placeholder='采集端口'></el-input>
        </el-form-item>
        <el-form-item prop='dataIdentification'>
          <el-input v-model.trim='dataForm.dataIdentification'
                    class='form-item'
                    clearable
                    placeholder='数据标识'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="search"
                     type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-loading='dataListLoading'>
        <el-table ref="table"
                  :data="dataList"
                  border
                  class="minh"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :row-key="getRowKey"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           reserve-selection
                           width="55"
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="deviceId"
                           label="设备ID"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="name"
                           label="设备名称"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="deviceType"
                           align="center"
                           label="设备类型"
                           show-overflow-tooltip
                           min-width="80">
            <template slot-scope="scope">
              <span>{{ $store.state.EquTypeList.find(item => item.id === scope.row.deviceType).name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="brand"
                           label="品牌"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="areaName"
                           label="所在位置"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="ip"
                           label="IP"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="gatherPort"
                           label="采集端口"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="dataIdentification"
                           label="数据标识"
                           min-width="80"
                           show-overflow-tooltip
                           header-align="center"
                           align="center"></el-table-column>
        </el-table>
      </div>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
        <el-button type="primary"
                   @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>

import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        // getDataListURL: '/tb/site/queryDevices?subsystem=8', // 数据列表接口，API地址
        // getDataListIsPage: true // 数据列表接口，是否需要分页？
      },
      visible: false,
      brandList: {}, // 所在位置
      equipmentTemplateList: [],
      dataList: [],
      dataForm: {
        deviceName: '',
        deviceType: '',
        brand: '',
        areaName: '',
        dataIdentification: ''
      }
    }
  },
  components: {
    tableTemplate,
    Search
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    closeDialog () {
      this.visible = false
    },
    getRowKey (row) {
      return row.id
    },
    handleSelectionChange (val) {
      if (val.length) {
        this.multipleSelection.splice(0, this.multipleSelection.length, ...val)
      }
    },
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    init (data, obj) {
      this.dataForm.dockingMethod = obj.dockingMethod
      this.visible = true
      this.multipleSelection = []
      data = data || []
      this.page = 1
      // this.getDataList()
      // .then(res => {
      //   if (res.code !== 0) {
      //     return
      //   }
      //   this.$refs.table.store.states.selection = data
      //   this.$refs.table.store.updateSelectionByRowKey()
      // })
    },
    getDataList () {
      this.$http.get(`tb/devicePolling/deviceBymultiple?dockingMethod=${this.dataForm.dockingMethod}&deviceType=${this.dataForm.deviceType}&deviceName=${this.dataForm.deviceName}&brand=${this.dataForm.brand}&areaName=${this.dataForm.areaName}&dataIdentification=${this.dataForm.dataIdentification}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.dataList = res.data
      })
    },
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      let arr = []
      let arr1 = []
      this.multipleSelection.map(item => {
        arr.push(item.ip)
        arr1.push(item.gatherPort)
      })
      arr = [...new Set(arr)]
      arr1 = [...new Set(arr1)]
      if (arr.length !== 1 || arr1.length !== 1) {
        return this.$message.warning('请选择相同ip和采集端口的设备')
      }
      this.$emit('closeDialog', this.multipleSelection)
      this.closeDialog()
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="scss" scoped>
.minh {
  max-height: 500px !important;
  overflow: auto;
}
.pagination {
  text-align: right;
  margin-top: 5px;
}
</style>
